import React, { Component } from 'react';
import styles from './PayWay.module.less'

// 图片
import alpay from '../../img/alpay.png'
import wxpay from '../../img/wxpay.png'
import checked from '../../img/checked.png'
import uncheck from '../../img/uncheck.png'

// 支付方式
class PayWay extends Component {
    constructor(props) {
        super(props)
        this.state = {
            defaultVal: 0,
            way: [{
                img: alpay,
                name: '支付宝',
                explan: '数亿用户都在用，安全可托付',
            }, {
                img: wxpay,
                name: '微信',
                explan: '一款跨平台的通讯工具',
            }]
        }
    }
    // 切换支付方式
    handleChangePayWay = (index) => {
        this.setState({
            defaultVal: index
        })
    }
    render() {
        let { way, defaultVal } = this.state;
        return (
            <div className={styles.container}>
                <h2 className={styles.title}>支付方式:</h2>
                {
                    way.map((item, index) => {
                        return (
                            <div key={index} className={styles.itemWrap} onClick={this.handleChangePayWay.bind(this, index)}>
                                <div className={styles.imgWrap}>
                                    <img src={item.img} alt={item.name} />
                                </div>
                                <div className={styles.contentWrap}>
                                    <div className={styles.content}>
                                        <p>{item.name}</p>
                                        <p>{item.explan}</p>
                                    </div>
                                    <div className={styles.checkBox}>
                                        <img src={defaultVal === index ? checked : uncheck} />
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

export default PayWay;
